<template>
  <!-- <div class="editor-wrapper">
   
  </div> -->
  <div>
    <n-layout class="editor-wrapper">
      <n-layout-header bordered>
        <Header></Header>
      </n-layout-header>
      <n-layout has-sider sider-placement="left">
        <n-layout-sider
          collapse-mode="width"
          :collapsed-width="64"
          :width="220"
          bordered
          :on-after-enter="handleResize"
          :on-after-leave="handleResize"
        >
          <ComponentPanel v-if="mapStore.isLoad"></ComponentPanel>
        </n-layout-sider>
        <n-layout-content>
          <div style="display: flex; height: calc(100vh - 100px)">
            <n-layout has-sider sider-placement="right">
              <n-layout-content>
                <n-tabs size="small" class="tabs" type="segment" animated>
                  <n-tab-pane
                    display-directive="show"
                    class="pane"
                    name="map"
                    tab="地图"
                  >
                    <CenterPanel></CenterPanel>
                  </n-tab-pane>
                  <n-tab-pane
                    class="pane"
                    display-directive="show"
                    name="table"
                    tab="表格"
                  >
                    <FeatureTable></FeatureTable>
                  </n-tab-pane>
                  <n-tab-pane
                    class="pane"
                    display-directive="if"
                    name="statics"
                    tab="统计"
                  >
                    我这辈子最疯狂的事，发生在我在 Amazon
                    当软件工程师的时候，故事是这样的：<br /><br />
                    那时我和女朋友住在一起，正在家里远程工作。忽然同事给我发来了紧急消息：”我们的服务出现了
                    SEV 2
                    级别的故障！需要所有的人马上协助！“我们组的应用全挂掉了。<br /><br />
                    当我还在费力的寻找修复方法的时候，忽然闻到隔壁房间的的焦味，防火报警器开始鸣叫。
                  </n-tab-pane>
                </n-tabs>
                <!-- <n-split
                  direction="vertical"
                  style="height: calc(100vh - 100px); overflow: hidden"
                  :default-size="0.8"
                  :resize-trigger-size="15"
                >
                  <template #1>
                    <CenterPanel></CenterPanel>
                  </template>
                  <template #2> <FeatureTable></FeatureTable> </template>
                  <template #resize-trigger>
                    <div
                      class="trigger-bar"
                      @mousemove="handleResize"
                      @mouseup="handleResize"
                    >
                      <n-icon color="white" :size="16">
                        <swap-horizontal-icon />
                      </n-icon>
                    </div>
                  </template>
                </n-split> -->
              </n-layout-content>
              <n-layout-sider
                collapse-mode="width"
                :collapsed-width="0"
                :width="300"
                show-trigger="bar"
                bordered
                :on-after-enter="handleResize"
                :on-after-leave="handleResize"
              >
                <ConfigPanel v-if="mapStore.isLoad"></ConfigPanel>
              </n-layout-sider>
            </n-layout>
          </div>
        </n-layout-content>
      </n-layout>

      <n-layout-footer>
        <Footer></Footer>
      </n-layout-footer>
    </n-layout>
  </div>
</template>

<script lang="ts" setup>
import Header from "./components/header/index.vue";
import ComponentPanel from "./components/component-panel/index.vue";
import Footer from "./components/footer/index.vue";
import CenterPanel from "./components/center-panel/index.vue";
import ConfigPanel from "./components/config-panel/index.vue";
import FeatureTable from "./components/features/index.vue";
import { useMapStore } from "@/store/map";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { useEventBus } from "@vueuse/core";
import { SwapHorizontal as SwapHorizontalIcon } from "@vicons/ionicons5";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const mapBus = useEventBus("map");
const route = useRoute();
const mapStore = useMapStore();
onMounted(() => {
  userStore.updateUserInfo();
  mapStore.clearDataset();
  const id = route.query.id as string;
  mapStore.getDatasetInfo(id).then((res) => {
    res.layers.forEach((layer) => {
      mapBus.emit({
        type: "render.layer",
        value: layer,
      });
    });
    mapBus.emit({
      type: "jumpTo",
      value: {
        center: res.location.coordinates,
        zoom: res.scale,
      },
    });
  });
});
const handleResize = () => {
  console.log("resize");
  mapBus.emit({ type: "resize" });
};
</script>

<style lang="scss" scoped>
.editor-wrapper {
  height: 100%;
  box-sizing: border-box;
}
.trigger-bar {
  background-color: rgba(255, 255, 255, 0.1);
  display: "flex";
  justify-content: "center";
  align-items: "center";
  box-sizing: border-box;
}
.trigger-bar:hover {
  background-color: #63e2b7;
  filter: drop-shadow(0px 0px 10px #63e2b744);
}
.tabs {
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: hidden;
}
.pane {
  width: 100%;
  height: calc(100vh - 100px);
}
</style>
